<template>
	<view class="page">
		<view class="menu">
			<view class="menu-list menu-border first-menu" :class="{'active':type==0,'less_list':is_guider!==1}" @click="setType(0)">全部订单</view>
			<view class="menu-list menu-border" :class="{'active':type==1,'less_list':is_guider!==1}" @click="setType(1)">审核中</view>
			<view class="menu-list menu-border" :class="{'active':type==2,'less_list':is_guider!==1}" @click="setType(2)">已通过</view>
			<view class="menu-list menu-border last-menu" :class="{'active':type==3,'less_list':is_guider!==1}" @click="setType(3)">未通过</view>
			<view class="menu-list add-menu" @click="addOrder" v-if="is_guider==1">
				<image src="../../static/pagesA-img/images/addorder.png" class="add-img"></image>
				<view class="add-text">
					新建订单
				</view>
			</view>
		</view>
		<view class="list" v-for="(item,index) in order_list_new" :key="index" @click="goDetail(item.id)" >
			<view class="">
				提交时间：{{item.create_time}}
			</view>
			<view class="list-box">
				<view class="order-img-box">
					<view class="img-box">
						<image v-if="item.images[0]" :src="item.images[0]" mode="aspectFit" class="img-box"></image>
						<image v-if="!item.images" src="../../static/pagesA-img/images/order.png" mode="aspectFit" class="img-box"></image>
					</view>
					<view class="">订单照片</view>
				</view>
				<view class="order-msg">
					<view class="title">订单资料</view>
					<view class="">订单总价：￥{{item.real_payments / 100}}</view>
					<view class="">支付状态：{{(item.status == 0 || item.status == 1) ? '未支付' : '已支付'}}</view>
					<view class="" v-if="item.audit !==0">审核状态：{{item.audit ==1 ? '审核中' : (item.audit ==2 ? '已通过' : '未通过')}}</view>
				</view>
				<image v-if="item.audit==1" src="../../static/pagesA-img/images/shenhezhong.png" class="float-img"></image>
				<image v-if="item.audit==2" src="../../static/pagesA-img/images/yitongguo.png" class="float-img img2"></image>
				<image v-if="item.audit==3" src="../../static/pagesA-img/images/weitongguo.png" class="float-img img3"></image>
			</view>
		</view>
		<view class="no-order-box" v-if="order_list_new.length==0">
			<image src="../../static/pagesA-img/images/noorder.png" class="no-order"></image>
		</view>
		<view class="write-box">
			<image lazy-load="true"  src="../../static/images/huishou.png" @click="goPost()" class="write"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				is_guider:0,
				order_list:[],
				order_list_new:[]
			}
		},
		onLoad(e) {
			var self = this;
			this.$request.request({
				url:'/order/offline/list',
				data:{
					audit:0,
					p:1,
					per:10000000
				},
				success:function(res){
					if(res.code==200){
						let x = res.result;
						x.forEach((item,index)=>{
							x[index].images = JSON.parse(item.images)
						})
						console.log(x)
						self.order_list = x
						self.order_list_new = x
						
					}
				}
			})
		},
		onShow() {
			var self = this;
			self.$request.request({
				url:'/user/info',
				success:function(res){
					if(res.code==200){
						var  y = res.result;
						
						self.is_guider = y.is_guider;
					}else{
						
					}
				}
			});
		},
		methods: {
			addOrder(){
				uni.navigateTo({
				    url: '../add-order/add-order'
				});
			},
			goDetail(id){
				uni.navigateTo({
				    url: '../order-detail/order-detail?id='+id
				});
			},
			setType(num){
				var self = this;
				this.order_list_new = [];
				this.type = num;
				if(num==0){
					this.order_list_new = this.order_list
				}else{
					this.order_list.forEach((item,index)=>{
						if(item.audit == num){
							self.order_list_new.push(item)
						}
					})
				}
				
			},
			goPost(){
				uni.switchTab({
				    url: '../../pages/index/index'
				});
			}
		}
	}
</script>

<style scoped>
.page{
	box-sizing: border-box;
	padding: 15upx;
	width: 100%;
	
}
.menu{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	
}
.add-img{
	width: 41upx;
	height: 41upx;
}
.menu-list{
	width: calc(100% / 5);
	text-align: center;
	font-size: 12px;
	padding: 20upx 0;
}
.less_list{
	width: calc(100% / 4);
}
.add-menu{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 10px;
}
.menu-border{
	border: 1px solid #e6e6e6;
	border-right: none;
}
.first-menu{
	border-top-left-radius: 10upx;
	border-bottom-left-radius: 10upx;
}
.last-menu{
	border-top-right-radius: 10upx;
	border-bottom-right-radius: 10upx;
	border-right: 1px solid #e6e6e6;
}
.active{
	color: #FFFFFF;
	background-color: #859dc2;
}
.list{
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	padding: 15upx;
	box-shadow: 0px 0px 5px #efefef;;
	margin-top: 20upx;
}
.list-box{
	
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.add-text{
	font-size: 12px;
}
.img-box{
	width: 185upx;
	height: 185upx;
	background-color: #fafafa;
}
.title{font-weight: bold;}
.order-msg{
	margin-left: 20upx;
}
.order-img-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #333333;
}
.float-img{
	position: absolute;
	width: 78upx;
	height: 77upx;
	right: 20upx;
	top:20upx
}
.img2{
	width: 89upx;
	height: 67upx;
}
.img3{
	width: 84upx;
	height: 73upx;
}
.no-order-box{
	margin-top: 40upx;
	text-align: center;
}
.no-order{
	width: 324upx;
	height: 424upx;
	
}
.write-box{
	position: fixed;
	width: 140upx;
	height: 140upx;
	right: 20upx;
	bottom:200upx;
	z-index: 20;
	font-size: 0;
}
.write{
	width: 140upx;
	height: 140upx;
}
	
</style>
